<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ref基本类型响应式原理</title>
</head>

<body>
    <script>
        /*
         如果ref接受的是基本类型值,原理如下(其实和vue2一样是数据劫持)
       */

        function upDateDom() {
            console.log("视图更新");
        }

        function ref(value) {
            //返回的对象就是ref对象
            const remImpl = {}
            //添加value属性，并给value属性设置存取器
            Object.defineProperty(remImpl , "value" ,{
                get(){
                    return value 
                },
                set(newVal){
                    value = newVal
                    upDateDom()
                },
            })
            return remImpl
        }

        const count = ref(0)
        console.log(count , "count");
        console.log(count.value , "count.value")
        count.value = 1
    </script>
</body>

</html>